import React from "react";
import {useAppDispatch, useAppSelector} from "../../../redux/hooks";
import {addWorkInfoItem} from "../../../redux";
import {getWorkInfo} from "../../../redux";
import {ControlBar} from "../../control-bar";
import {MyIcon, SuTitle} from "../../su-title";
import {MedicineBoxOutlined} from "@ant-design/icons";
import {ClsControl} from "../../block-control";
import {RWorkExperienceItem} from "./r-work-experience-item";

export const RWorkExperience: React.FC = () => {
    const workInfoList = useAppSelector(getWorkInfo);
    const dispatch = useAppDispatch();
    return<ClsControl canDrag={true} controlBar={
        <ControlBar
            style={{top: 0}}
            displayConfig={{ add: true}}
            onClickAdd={() => { dispatch(addWorkInfoItem()) }}
        ></ControlBar>
    }>
        <SuTitle title='工作经历' icon={
            // <span className='iconfont icon-gongzuojingli'></span>
            <MyIcon type={"gongzuojingli"}/>
        }></SuTitle>
        {
            workInfoList.map((workInfo, index) =>
                <RWorkExperienceItem
                    key={index}
                    index={index}
                    workInfo={workInfo}
                ></RWorkExperienceItem>
            )
        }
    </ClsControl>
}
